<template>
    <div class="advantage">
        <figure>
            <img src="https://img.podpartner.com/static/images-20230202/home-advantage-1.png" alt="">
            <img src="https://img.podpartner.com/static/images-20230202/home-advantage-2.png" alt="">
            <img src="https://img.podpartner.com/static/images-20230202/home-advantage-3.png" alt="">
        </figure>
        <div class="advantage-content">
            <dl>
                <dd><span>•</span>No Order Minimums</dd>
                <dd><span>•</span>No Sale, No Charge</dd>
                <dd><span>•</span>No Unsold Stock</dd>
                <dd><span>•</span>No Quality Concerns</dd>
                <dt>Only Creativity, Satisfaction, and Profits!</dt>
            </dl>
            <button type="primary" @click="$router.push('/user')">Get started</button>
            <figure class="advantage-content-bg">
                <p></p>
                <p></p>
                <p></p>
            </figure>
        </div>
    </div>
</template>
<script>
export default {
    name: "HomeSummarizeAdvantage",
    data () {
        return {}
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.advantage {
    padding: 180px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background: #fff;
    position: relative;
    & > figure {
        position: absolute;
        inset: 0;
        pointer-events: none;
        img {
            position: absolute;
            height: auto;
            &:nth-child(1) {
                left: 0;
                top: 254px;
                width: 24px;
            }
            &:nth-child(2) {
                right: 188px;
                top: 76px;
                width: 42px;
            }
            &:nth-child(3) {
                right: 0;
                top: 580px;
                width: 40px;
            }
        }
    }
    .advantage-content {
        width: 100%;
        max-width: 1200px;
        min-width: 894px;
        height: 362px;
        border-radius: 48px;
        background-color: #f0f0f0;
        background-image: url("https://img.podpartner.com/static/images-20230202/home-advantage-bg.png");
        background-repeat: no-repeat;
        background-size: 894px 362px;
        background-position: 50% 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        dl {
            font-family: Roboto-Medium, Roboto;
            width: 894px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 40px;
            dt {
                width: 100%;
                text-align: center;
                font-size: 36px;
                color: #000000;
                line-height: 32px;
                margin-top: 32px;
            }
            dd {
                font-size: 18px;
                color: #000;
                line-height: 26px;
                span {
                    display: inline-block;
                    color: #edb002;
                    margin-right: 8px;
                }
                margin-right: 40px;
                &:nth-last-child(2) {
                    margin-right: 0;
                }
            }
        }
        button {
            font-family: Roboto;
            width: 260px;
            height: 52px;
            // background: #ea4c89;
            border-radius: 8px;
            border: none;
            outline: none;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            line-height: 20px;
        }
        .advantage-content-bg {
            display: none;
        }
    }
}

@media screen and (max-width: 960px) {
    .advantage {
        transform: none;
        transition: none;
        background: #fff;
        padding: 48px 14px 40px;
        // max-width: 558px;
        figure {
            display: none;
        }
        div {
            padding: 40px 0;
            width: auto !important;
            max-width: none !important;
            min-width: auto !important;
            height: auto !important;
            border-radius: 22px !important;
            .advantage-content-bg {
                display: block !important;
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                background-image: none;
                p {
                    &:nth-child(1) {
                        width: 32px;
                        height: 32px;
                        background: #e7dba1;
                        opacity: 0.5;
                        border-radius: 50%;
                        position: absolute;
                        right: 90px;
                        top: -20px;
                    }
                    &:nth-child(2) {
                        width: 34px;
                        height: 34px;
                        background: #a1c9e7;
                        opacity: 0.5;
                        border-radius: 50%;
                        position: absolute;
                        right: 38px;
                        bottom: -18px;
                    }
                    &:nth-child(3) {
                        width: 20px;
                        height: 20px;
                        background: #e7a1ba;
                        opacity: 0.5;
                        border-radius: 50%;
                        position: absolute;
                        left: 50px;
                        bottom: -12px;
                    }
                }
            }
            dl {
                width: auto !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                margin: 0;
                padding: 0 20px;
                dd {
                    width: 186px;
                    margin: 0 0 14px 0 !important;
                    font-size: 16px !important;
                }
                dt {
                    margin-top: 12px !important;
                    font-size: 24px !important;
                    line-height: 36px !important;
                }
            }

            button {
                display: none;
            }
        }
    }
}
</style>
